<!--
 * @Author: your name
 * @Date: 2021-04-02 09:17:45
 * @LastEditTime: 2021-04-28 16:57:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\Home\index.vue
-->
<template>
  <div>
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in imgList" :key="item.name">
        <img
          :src="item.href"
          style="height:100%;width:100%;"
          alt="图片丢失了"
          :title="item.id"
        />
      </el-carousel-item>
    </el-carousel>
    <el-row>
      <el-col :span="15">
        <HomeEchartsDemoIndex
          v-if="tagVO"
          :tagVO="tagVO"
        ></HomeEchartsDemoIndex>
      </el-col>
      <el-col :span="9" style="margin-top:100px">
        <el-tabs type="border-card">
          <el-tab-pane label="推荐活动">
            <p style="padding:6px 0"></p>
            <div v-for="item in list" :key="item.aid">
              <el-row type="flex" align="middle" :gutter="5">
                <el-col :span="5" style="text-align:center">
                  <el-tag type="" effect="plain">{{ item.tag.name }}</el-tag>
                </el-col>
                <el-col :span="14">
                  <el-link @click="() => actInfo(item.aid)" type="success">{{
                    item.name
                  }}</el-link>
                </el-col>
                <el-col :span="5" style="text-align:end">
                  <span type="" effect="plain">{{ item.createDate }}</span>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </el-tab-pane>
          <el-tab-pane label="热门活动">暂无经费开发</el-tab-pane>
          <el-tab-pane label="我的活动">暂无经费开发</el-tab-pane>
          <el-tab-pane label="活动排行榜">暂无经费开发</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- <HomeHotevents></HomeHotevents> -->
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Home from "../../api/Home";
// import HomeHotevents from "../HomeHotevents/index";
export default {
  data() {
    return {
      imgList: [],
      tagVO: null,
      list: null
    };
  },
  computed: {
    ...mapState(["activeIndex"])
  },
  methods: {
    //时间戳转换方法    date:时间戳数字
    formatDate(date) {
      var date = new Date(date);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // return YY + MM + DD + " " + hh + mm + ss;
      return YY + MM + DD;
    },
    actInfo(id) {
      this.$router.push({
        path: `/info/activity/${id}`
        // path: "/info/activity/:id",
        // query: {
        //   id: id
        // }
      });
    },
    ...mapMutations(["activeIndexUpdate", "UpdateNews"])
  },
  async created() {
    this.activeIndexUpdate("/info/home");
    const data = await Home.Home();
    if (!data) return;
    this.tagVO = data.weekInfo;
    data.list.map(item => {
      item.createDate = this.formatDate(item.createDate);
    });
    this.list = data.list;
    console.log("数据", data);
    this.UpdateNews(data.news);
    this.imgList = data.indexImg;
  },
  async mounted() {}
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
